<template>
	<div class="sliderbarNbhsjNew" id="">
		<vue-scroll
                :ops="ops"
            >
		    <el-menu :collapse="collapse" class="el-menu-vertical-demo" :popper-append-to-body="appendToParent">
                <template v-for="(item,index) in menuList">
                    <el-submenu  :key="item.id" :index="item.id">
                        <template slot="title">
                            <div>
                                <i :class="`${item.ico||iconList[index % 6]} iconfont`"></i>
                                <span slot="title" >{{item.name}}</span>
                            </div>
                        </template>

                        <el-submenu v-for="(itemTwo) in item.children" :key="itemTwo.id" :index="itemTwo.id">
                            <span slot="title" >{{itemTwo.name}}</span>
                            <el-menu-item :index="itemThree.id" v-for="(itemThree) in itemTwo.children" :key="itemThree.id" >
                                <span @click="openURL(itemThree.url, false, itemThree.name, itemThree.id)">{{itemThree.name}}</span>
                                <i class="iconfont icon-icon-plus add-highLink-new" title="添加到高频链接" @click="addHighLink(itemThree.icon,itemThree.name,itemThree.url,itemThree.id)"></i>
                            </el-menu-item>
                        </el-submenu>
                    </el-submenu>
                </template>
           </el-menu>
           <!-- <div class="mask" v-if="showMask"></div> -->
		</vue-scroll>
	</div>
</template>

<script>
import bus from '../common/bus';
import appUtil from '~/assets/utils/appUtil.js';
import { createNamespacedHelpers } from 'vuex';
const {  mapMutations: mapTagMutations } = createNamespacedHelpers('tagModule');

export default {
    name: 'SliderbarNbhsjNew',
    data() {
		
        return {
            appendToParent:false,
			 ops: {
                rail: {
                    opacity: '0',
                },
                bar: {
                    onlyShowBarOnScroll: false,
                    background: '#c6c6c6',
                    size: '3px',
                    right:0
                },
            },
            collapse: true,
            //isShow:true,
            menuList: [],
            iconList: ['el-icon-document', 'el-icon-setting', 'el-icon-date', 'el-icon-news', 'el-icon-edit',
                'el-icon-edit-outline'],
            showMask:false // 显示遮罩层
        };
    },
    computed: {
        
        onRoutes() {
            return this.$route.path.replace('/', '');
        }
    },

    created() {
        // 通过 Event Bus 进行组件间通信，来折叠侧边栏
        bus.$on('collapse', msg => {
            this.collapse = msg;
        });
        
        // /ptp-engine/apis/menu
        // ./data/menu.json
        this.$axios.get('/ptp-engine/apis/menu').then(res2 => {
            let menu = res2.data.menuTree;
            let tempData = [];
            for (let i = 0; i < (menu ? menu.length : 0); i++) {
                tempData = tempData.concat(menu[i].children);
            }
            this.menuList = tempData;
        });
    },
    mounted() {

    },
    methods: {
        ...mapTagMutations([
            'addTag'
        ]),
        //进入系统后立即单点登录到8.0系统，以保证8.0的页面能正常打开
        /*ssoLogin(){

				},*/
        isNew(url) {
            let reg = /(?:[?]|&)isNew=(\w*)(&|$)/;
            let res = reg.exec(url);
            return res && res[1] === 'true';
        },
        addHighLink(icon, title, url, id) {
            if (!url || url === '') {
                return;
            }
            let data = {
                'icon': icon,
                'menuId': id,
                'name': title,
                'url': url,
                'userCode': appUtil.getSes('userCode')
            };
            this.$axios.post('/ptp-engine/api/title', data);
            bus.$emit('val', data);
        },
        //openerURL用于命令式地打开新页签时记录母页签url，使用sidebar打开时不需要传
        openURL(url, isNew, title, id) {
            let menu = {
                url: url,
                id: id,
                isNew: isNew,
                name: title
            };
            this.addTag(menu);
        }
        
    },
};
</script>
<style>

</style>
<style scoped lang="scss">
.sliderbarNbhsjNew{
    height: 100%;
    position: fixed;
    z-index: 4;
	 .el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 250px;
		min-height: 400px;
	}
  .iconfont{
	  margin-right: 10px;
  }
  .add-highLink{
	  float: right;
	  font-size: 14px;
  }
  .mask{
      position: fixed;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: rgba($color: #000000, $alpha: 0.2);
      z-index: 2;
  }
  .el-menu-vertical-demo{
      z-index: 5;
  }
}

</style>
<style >
.add-highLink-new{
	  font-size: 14px!important;
	  position: absolute;
	  right: 18px;
	  z-index: 2;
  }
  
</style>